<template>
  <div>
    <h2>GALGAME</h2>

    <form>
      <fieldset>
        <label for="title">标题</label>
        <input id="title" v-model="title" type="text" />
      </fieldset>

      <fieldset>
        <label for="comp">出品社</label>
        <input id="comp" v-model="comp" type="text" />
      </fieldset>

      <fieldset>
        <label for="lang">语言</label>

        <label for="zh">ZH</label>
        <input type="checkbox" id="zh" value="zh" v-model="lang" name="lang" />

        <label for="ja">JA</label>
        <input type="checkbox" id="ja" value="ja" v-model="lang" name="lang" />

        <label for="en">EN</label>
        <input type="checkbox" id="en" value="en" v-model="lang" name="lang" />
      </fieldset>

      <fieldset>
        <label for="group">汉化组</label>
        <input id="group" type="text" v-model="group" />
      </fieldset>
    </form>

    <template>
      <a-textarea placeholder="暂未生成" :rows="4" :value="output" />
    </template>

    <CD />
  </div>
</template>

<script>
import CD from "@/components/CD.vue";

export default {
  components: { CD },
  data() {
    return {
      title: "",
      comp: "",
      lang: [],
      group: "",
      output: "",
    };
  },
  methods: {
    generate() {
      let langs = "";
      this.lang.forEach((item) => {
        if (langs.length === 0) {
          langs = item;
        } else {
          langs = langs + "&" + item;
        }
      });
      this.output = `[GAL][${this.title}][${this.comp}][${langs}][${this.group}]`;
    },
  },
  watch: {
    $data: {
      handler: function () {
        this.generate();
      },
      deep: true,
    },
  },
};
</script>


<style scoped>
form {
  display: flex;
  flex-flow: column;
}
</style>
